import React, { useState, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
import Sidebar from './components/layout/Sidebar'
import Header from './components/layout/Header'
import Dashboard from './components/Dashboard'

// 使用动态导入避免模块加载错误
const EnterpriseOnboarding = React.lazy(() => import('./EnterpriseOnboarding'))
const WorkbenchMain = React.lazy(() => import('./modules/Workbench/WorkbenchMain'))
const CarbonFootprintMain = React.lazy(() => import('./modules/CarbonFootprint/CarbonFootprintMain'))
const GreenhouseGasInventoryMain = React.lazy(() => import('./modules/GreenhouseGasInventory/GreenhouseGasInventoryMain'))
const CarbonInventoryMain = React.lazy(() => import('./modules/CarbonInventory/CarbonInventoryMain'))
const ESGEvaluationMain = React.lazy(() => import('./modules/ESGEvaluation/ESGEvaluationMain'))
const ComplianceMain = React.lazy(() => import('./modules/Compliance/ComplianceMain'))
const AnalyticsMain = React.lazy(() => import('./modules/Analytics/AnalyticsMain'))
const ReportingMain = React.lazy(() => import('./modules/Reporting/ReportingMain'))

// 加载组件
const LoadingComponent = () => (
  <div className="flex items-center justify-center h-64">
    <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500"></div>
  </div>
)

function App() {
  const [sidebarOpen, setSidebarOpen] = useState(false)

  return (
    <div className="flex h-screen bg-gray-50">
      {/* 侧边栏 */}
      <Sidebar open={sidebarOpen} setOpen={setSidebarOpen} />
      
      {/* 主内容区域 */}
      <div className="flex-1 flex flex-col overflow-hidden">
        {/* 头部导航 */}
        <Header onMenuClick={() => setSidebarOpen(true)} />
        
        {/* 路由内容 */}
        <main className="flex-1 overflow-y-auto bg-gray-50">
          <Suspense fallback={<LoadingComponent />}>
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/enterprise-onboarding" element={<EnterpriseOnboarding />} />
              <Route path="/workbench" element={<WorkbenchMain />} />
              <Route path="/carbon-footprint" element={<CarbonFootprintMain />} />
              <Route path="/greenhouse-gas-inventory" element={<GreenhouseGasInventoryMain />} />
              <Route path="/carbon-inventory" element={<CarbonInventoryMain />} />
              <Route path="/esg-evaluation" element={<ESGEvaluationMain />} />
              <Route path="/compliance" element={<ComplianceMain />} />
              <Route path="/analytics" element={<AnalyticsMain />} />
              <Route path="/reporting" element={<ReportingMain />} />
            </Routes>
          </Suspense>
        </main>
      </div>
    </div>
  )
}

export default App 